<template>
  <div class="main_body_friendApply">
    <div class="main_body_friendApply_title">
      <div class="main_body_friendApply_title_one">好友申请</div>
      <div v-if="notReadCount!==0" class="main_body_friendApply_title_two">{{ tipContent }}</div>
    </div>
    <div class="main_body_friendApply_content">
      <div v-for="(item,index) in informList" :key="item.id">
        <div @click="handleUpdateIsRead(item,index)" class="main_body_friendApply_content_item">
          <img :src="item.avatar" class="main_body_friendApply_content_item_avatar" alt="头像">
          <div>
            <div class="main_body_friendApply_content_item_one">
              <div class="main_body_friendApply_content_item_one_nickname">{{ item.nickname }}</div>
              <div class="main_body_friendApply_content_item_one_msg">申请添加好友</div>
              <div v-if="item.isRead===0" class="main_body_friendApply_content_item_one_notRead">未读</div>
              <div v-else class="main_body_friendApply_content_item_one_read">已读</div>
            </div>
            <div class="main_body_friendApply_content_item_two">
              <div class="main_body_friendApply_content_item_two_message">{{ item.message }}</div>
              <div class="main_body_friendApply_content_item_two_createTime">{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </div>
      <a-pagination v-model:current="pagination.current"
                    v-model:page-size="pagination.pageSize"
                    :size="pagination.size"
                    :total="pagination.total"
                    :show-total="pagination.showTotal"
                    :show-size-changer="pagination.showSizeChanger"
                    @showSizeChange="pagination.onShowSizeChange"
                    @change="pagination.onChange"
                    show-quick-jumper
                    style="text-align: center;margin: 20px;"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {getInformList, updateIsRead} from "@/api/home/inform";
// @ts-ignore
import cookie from 'js-cookie'

//通知列表
const informList = ref()

//通知未读数量
const notReadCount = ref()
//提示内容
let tipContent = ''

//用户id
const userId = ref<number>(0)

//获取通知
const handleInformList = () => {
  getInformList(userId.value, [5], pagination.value.current, pagination.value.pageSize).then((res) => {
    informList.value = res.data.data.map.list
    pagination.value.total = res.data.data.map.total
    notReadCount.value = res.data.data.map.count
    tipContent = "(" + res.data.data.map.count + "条未读)"
  })
}

//修改是否已读
const handleUpdateIsRead = (row: any, index: number) => {
  if (row.isRead === 0) {
    updateIsRead(userId.value, row.id).then(() => {
      informList.value[index].isRead = 1
      notReadCount.value = notReadCount.value - 1
      tipContent = "(" + notReadCount.value + "条未读)"
    })
  }
}

//分页
const pagination = ref({
  size: 'large',
  current: 1,
  pageSize: 7,
  total: 0,
  showTotal: (total: number) => {
    return " 共" + total + "条"
  },
  showSizeChanger: false,
  onShowSizeChange: (current: number, pageSize: number) => {
    pagination.value.pageSize = pageSize
    handleInformList()
  },
  onChange: (current: number) => {
    pagination.value.current = current
    handleInformList()
  }
})

//获取用户id
const getUserId = () => {
  if (cookie.get('userinfo') != null) {
    userId.value = JSON.parse(cookie.get('userinfo')).id
  } else {
    userId.value = 0
  }
}

getUserId()
handleInformList()
</script>

<style lang="less" scoped>
.main_body_friendApply {
  width: 1000px;

  .main_body_friendApply_title {
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;

    .main_body_friendApply_title_two {
      color: red;
    }
  }

  .main_body_friendApply_content {
    padding: 0 10px 10px;

    .main_body_friendApply_content_item {
      display: flex;
      margin-top: 10px;
      border-bottom: 1px solid #f0f0f0;

      .main_body_friendApply_content_item_avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-bottom: 10px;
        margin-right: 10px;
      }

      .main_body_friendApply_content_item_one {
        display: flex;
        margin-top: 10px;

        .main_body_friendApply_content_item_one_msg {
          color: #99a;
          margin-left: 10px;
        }

        .main_body_friendApply_content_item_one_notRead {
          margin-left: auto;
          color: red;
        }

        .main_body_friendApply_content_item_one_read {
          margin-left: auto;
          color: dimgray;
        }
      }

      .main_body_friendApply_content_item_two {
        display: flex;
        width: 883px;
        margin-top: 10px;

        .main_body_friendApply_content_item_two_message {
          width: 650px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .main_body_friendApply_content_item_two_createTime {
          margin-left: auto;
        }
      }
    }
  }
}
</style>